<template>
  <el-container class="main_container">
    <!-- 头部布局 -->
    <el-header class="main_header">
      <!-- 头部logo和项目名称 -->
      <div class="left_box">
        <img src="../assets/image/logo.png" alt />
        <span>中国新冠物资管理系统</span>
      </div>
      <!-- 头部用户登录后的头像 -->
      <div class="right_box">
        <el-dropdown placement="bottom">
          <img src="../assets/image/logo.jpeg" alt="用户头像" title="用户头像" />
          <el-dropdown-menu slot="dropdown" class="el_dropdown_menu">
            <el-dropdown-item icon="el-icon-house">
              <router-link to="/main">系统首页</router-link>
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-ship">
              <router-link to>交流讨论</router-link>
            </el-dropdown-item>
            <el-dropdown-item icon="el-icon-switch-button">
              <router-link to="/login">退出登录</router-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <!-- 侧边导航栏 -->
      <el-aside :width="isCollapse?'34px':'160px'">
        <!-- 张开收起 -->
        <div class="toggle_box" @click="menutoggle">| | |</div>
        <el-menu
          :collapse="isCollapse"
          default-active=""
          class="aside_el_menu"
          background-color="#001529"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse-transition=false
          :unique-opened=true
          :router=true
        >
          <menu-tree :menuList="this.menuList"></menu-tree>
        </el-menu>
      </el-aside>

      <!-- 主内容 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MenuTree from '../components/MenuTree'

export default {
  name: "Main",
  data() {
    return {
      isCollapse: false,
      //菜单列表(后台数据)
      menuList:[
                    {
                        id: 1,
                        parentId: 0,
                        menuName: '系统管理',
                        url: '',
                        icon: 'el-icon-setting',
                        orderNum: 1,
                        open: 1,
                        disabled: false,
                        perms: null,
                        type: 0,
                        children: [
                            {
                                id: 253,
                                parentId: 1,
                                menuName: '欢迎页面',
                                url: '/welcome',
                                icon: 'el-icon-star-off',
                                orderNum: 1,
                                open: 0,
                                disabled: false,
                                perms: 'welcome:view',
                                type: 0,
                                children: []
                            },
                            {
                                id: 226,
                                parentId: 1,
                                menuName: '用户管理',
                                url: '/users',
                                icon: 'el-icon-user',
                                orderNum: 2,
                                open: 0,
                                disabled: false,
                                perms: 'users',
                                type: 0,
                                children: []
                            },
                            {
                                id: 321,
                                parentId: 1,
                                menuName: '附件管理',
                                url: '/attachments',
                                icon: 'el-icon-picture-outline',
                                orderNum: 2,
                                open: 1,
                                disabled: false,
                                perms: '',
                                type: 0,
                                children: []
                            },
                            {
                                id: 4,
                                parentId: 1,
                                menuName: '菜单权限',
                                url: '/menus',
                                icon: 'el-icon-help',
                                orderNum: 3,
                                open: 0,
                                disabled: false,
                                perms: null,
                                type: 0,
                                children: []
                            },
                            {
                                id: 235,
                                parentId: 1,
                                menuName: '角色管理',
                                url: '/roles',
                                icon: 'el-icon-postcard',
                                orderNum: 3,
                                open: 0,
                                disabled: false,
                                perms: '',
                                type: 0,
                                children: []
                            },
                            {
                                id: 261,
                                parentId: 1,
                                menuName: '部门管理',
                                url: '/departments',
                                icon: 'el-icon-s-home',
                                orderNum: 3,
                                open: 0,
                                disabled: false,
                                perms: '',
                                type: 0,
                                children: []
                            },
                            {
                                id: 319,
                                parentId: 1,
                                menuName: '公告管理',
                                url: '/notices',
                                icon: 'el-icon-s-flag',
                                orderNum: 4,
                                open: 0,
                                disabled: true,
                                perms: '',
                                type: 0,
                                children: []
                            }
                        ]
                    },
                    {
                        id: 312,
                        parentId: 0,
                        menuName: '业务管理',
                        url: '',
                        icon: 'el-icon-s-goods',
                        orderNum: 2,
                        open: 0,
                        disabled: false,
                        perms: null,
                        type: 0,
                        children: [
                            {
                                id: 229,
                                parentId: 312,
                                menuName: '物资管理',
                                url: '',
                                icon: 'el-icon-date',
                                orderNum: 1,
                                open: 1,
                                disabled: false,
                                perms: 'el-icon-date',
                                type: 0,
                                children: [
                                    {
                                        id: 230,
                                        parentId: 229,
                                        menuName: '物资入库',
                                        url: '/inStocks',
                                        icon: 'el-icon-date',
                                        orderNum: 1,
                                        open: 1,
                                        disabled: false,
                                        perms: 'el-icon-date',
                                        type: 0,
                                        children: []
                                    },
                                    {
                                        id: 267,
                                        parentId: 229,
                                        menuName: '物资资料',
                                        url: '/products',
                                        icon: 'el-icon-goods',
                                        orderNum: 2,
                                        open: 0,
                                        disabled: false,
                                        perms: '',
                                        type: 0,
                                        children: []
                                    },
                                    {
                                        id: 268,
                                        parentId: 229,
                                        menuName: '物资类别',
                                        url: '/productCategorys',
                                        icon: 'el-icon-star-off',
                                        orderNum: 2,
                                        open: 0,
                                        disabled: false,
                                        perms: '',
                                        type: 0,
                                        children: []
                                    },
                                    {
                                        id: 270,
                                        parentId: 229,
                                        menuName: '物资发放',
                                        url: '/outStocks',
                                        icon: 'el-icon-goods',
                                        orderNum: 5,
                                        open: 1,
                                        disabled: false,
                                        perms: '',
                                        type: 0,
                                        children: []
                                    },
                                    {
                                        id: 316,
                                        parentId: 229,
                                        menuName: '物资库存',
                                        url: '/stocks',
                                        icon: 'el-icon-tickets',
                                        orderNum: 5,
                                        open: 0,
                                        disabled: false,
                                        perms: '',
                                        type: 0,
                                        children: []
                                    }
                                ]
                            },
                            {
                                id: 311,
                                parentId: 312,
                                menuName: '物资流向',
                                url: '',
                                icon: 'el-icon-edit',
                                orderNum: 3,
                                open: 0,
                                disabled: false,
                                perms: null,
                                type: 0,
                                children: [
                                    {
                                        id: 310,
                                        parentId: 311,
                                        menuName: '物资去处',
                                        url: '/consumers',
                                        icon: 'el-icon-edit',
                                        orderNum: 1,
                                        open: 0,
                                        disabled: false,
                                        perms: '',
                                        type: 0,
                                        children: []
                                    },
                                    {
                                        id: 269,
                                        parentId: 311,
                                        menuName: '物资来源',
                                        url: '/suppliers',
                                        icon: 'el-icon-coordinate',
                                        orderNum: 5,
                                        open: 0,
                                        disabled: false,
                                        perms: '',
                                        type: 0,
                                        children: []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id: 303,
                        parentId: 0,
                        menuName: '健康报备',
                        url: '',
                        icon: 'el-icon-platform-eleme',
                        orderNum: 3,
                        open: 0,
                        disabled: false,
                        perms: '',
                        type: 0,
                        children: [
                            {
                                id: 273,
                                parentId: 303,
                                menuName: '全国疫情',
                                url: '/map',
                                icon: 'el-icon-s-opportunity',
                                orderNum: 1,
                                open: 1,
                                disabled: false,
                                perms: 'map:view',
                                type: 0,
                                children: []
                            },
                            {
                                id: 304,
                                parentId: 303,
                                menuName: '健康打卡',
                                url: '/health',
                                icon: 'el-icon-s-cooperation',
                                orderNum: 1,
                                open: 0,
                                disabled: false,
                                perms: '',
                                type: 0,
                                children: []
                            },
                            {
                                id: 305,
                                parentId: 303,
                                menuName: '查看情况',
                                url: '/chakan',
                                icon: 'el-icon-c-scale-to-original',
                                orderNum: 2,
                                open: 1,
                                disabled: false,
                                perms: null,
                                type: 0,
                                children: []
                            },
                            {
                                id: 272,
                                parentId: 303,
                                menuName: '疫情辟谣',
                                url: '/rumors',
                                icon: 'el-icon-help',
                                orderNum: 5,
                                open: 0,
                                disabled: false,
                                perms: null,
                                type: 0,
                                children: []
                            }
                        ]
                    },
                    {
                        id: 295,
                        parentId: 0,
                        menuName: '其他管理',
                        url: '',
                        icon: 'el-icon-s-marketing',
                        orderNum: 5,
                        open: 0,
                        disabled: false,
                        perms: '',
                        type: 0,
                        children: [
                            {
                                id: 297,
                                parentId: 295,
                                menuName: '监控管理',
                                url: '',
                                icon: 'el-icon-warning',
                                orderNum: 1,
                                open: 0,
                                disabled: false,
                                perms: '',
                                type: 0,
                                children: [
                                    {
                                        id: 298,
                                        parentId: 297,
                                        menuName: 'SQL监控',
                                        url: '/druid',
                                        icon: 'el-icon-view',
                                        orderNum: 1,
                                        open: 0,
                                        disabled: false,
                                        perms: null,
                                        type: 0,
                                        children: []
                                    }
                                ]
                            },
                            {
                                id: 341,
                                parentId: 295,
                                menuName: '个人博客',
                                url: '/blog',
                                icon: 'el-icon-view',
                                orderNum: 1,
                                open: 0,
                                disabled: false,
                                perms: '',
                                type: 0,
                                children: []
                            },
                            {
                                id: 296,
                                parentId: 295,
                                menuName: 'swagger文档',
                                url: '/swagger',
                                icon: 'el-icon-document',
                                orderNum: 2,
                                open: 0,
                                disabled: false,
                                perms: null,
                                type: 0,
                                children: []
                            },
                            {
                                id: 318,
                                parentId: 295,
                                menuName: '图标管理',
                                url: '/icons',
                                icon: 'el-icon-star-off',
                                orderNum: 2,
                                open: 1,
                                disabled: false,
                                perms: '',
                                type: 0,
                                children: []
                            }
                        ]
                    },
                    {
                        id: 5,
                        parentId: 0,
                        menuName: '日志管理',
                        url: '',
                        icon: 'el-icon-camera',
                        orderNum: 6,
                        open: 0,
                        disabled: false,
                        perms: null,
                        type: 0,
                        children: [
                            {
                                id: 271,
                                parentId: 5,
                                menuName: '登入日志',
                                url: '/loginLog',
                                icon: 'el-icon-date',
                                orderNum: 1,
                                open: 0,
                                disabled: false,
                                perms: 'login:log',
                                type: 0,
                                children: []
                            },
                            {
                                id: 307,
                                parentId: 5,
                                menuName: '操作日志',
                                url: '/logs',
                                icon: 'el-icon-edit',
                                orderNum: 1,
                                open: 1,
                                disabled: false,
                                perms: '',
                                type: 0,
                                children: []
                            }
                        ]
                    }
                ],
      
    
    
    
    };
  },
  components:{
      MenuTree
  },
  methods: {
    menutoggle() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style scoped>
/* 头部布局 */
.left_box {
  position: absolute;
  left: 10px;
  top: 0px;
  height: 60px;
}
.left_box img {
  width: 80px;
  margin-top: 5px;
}
.left_box span {
  color: #fff;
  font-size: 20px;
  font-family: "Helvetica Neue";
  position: relative;
  top: -15px;
  left: 20px;
}
.right_box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  right: 30px;
  top: 5px;
  border: 1px solid #eee;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.right_box img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.el_dropdown_menu a {
  text-decoration: none;
  color: black;
}
/* 头部布局结束 */

/* 侧边栏布局 */
.aside_el_menu {
  border-right:none ;
  margin-left: -15px;
  width: 105%;
  
}
.toggle_box {

  background-color: chartreuse;
  cursor: pointer;
  font-weight: bold;
  color: #666;
}




/* 侧边栏布局结束 */
/* 整体布局样式 */
.main_container {
  height: 100%;
}
.el-header {
  background-color: #001529;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #001529;
  overflow: hidden;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
/* 整体布局样式结束 */
</style>